//展示银行用的数据，整合进一个js算了
var ycBanks = [
    {
        "name": "招商银行",
        "positionX": "-18px",
        "positionY": 0,
        "debit": 1,
        "credit": 1
    },
    {
        "name": "工商银行",
        "positionX": 0,
        "positionY": 0,
        "debit": 1,
        "credit": 1
    },
    {
        "name": "建设银行",
        "positionX": "-36px",
        "positionY": 0,
        "debit": 1,
        "credit": 1
    },
    {
        "name": "农业银行",
        "positionX": "-54px",
        "positionY": 0,
        "debit": 1,
        "credit": 0
    },
    {
        "name": "中国银行",
        "positionX": "-72px",
        "positionY": 0,
        "debit": 1,
        "credit": 1
    },
    {
        "name": "兴业银行",
        "positionX": 0,
        "positionY": "-18px",
        "debit": 1,
        "credit": 1
    },
    {
        "name": "北京银行",
        "positionX": "-126px",
        "positionY": "-18px",
        "debit": 1,
        "credit": 0
    },
    {
        "name": "光大银行",
        "positionX": "-90px",
        "positionY": 0,
        "debit": 1,
        "credit": 1
    },
    {
        "name": "交通银行",
        "positionX": "-36px",
        "positionY": "-18px",
        "debit": 1,
        "credit": 1
    },
    {
        "name": "民生银行",
        "positionX": "-90px",
        "positionY": "-18px",
        "debit": 1,
        "credit": 1
    },
    {
        "name": "中信银行",
        "positionX": "-126px",
        "positionY": 0,
        "debit": 1,
        "credit": 0
    },
    {
        "name": "平安银行",
        "positionX": 0,
        "positionY": "-36px",
        "debit": 1,
        "credit": 0
    },
    {
        "name": "邮政银行",
        "positionX": "-18px",
        "positionY": "-18px",
        "debit": 1,
        "credit": 0
    },
    {
        "name": "宁波银行",
        "positionX": "-90px",
        "positionY": "-36px",
        "debit": 1,
        "credit": 1
    },
    {
        "name": "南京银行",
        "positionX": "-108px",
        "positionY": "-36px",
        "debit": 1,
        "credit": 0
    },
    {
        "name": "广发银行",
        "positionX": "-72px",
        "positionY": "-18px",
        "debit": 1,
        "credit": 1
    },
    {
        "name": "浦发银行",
        "positionX": "-54px",
        "positionY": "-18px",
        "debit": 1,
        "credit": 1
    },
    {
        "name": "上海农商",
        "positionX": "-72px",
        "positionY": "-36px",
        "debit": 1,
        "credit": 0
    },
    {
        "name": "东亚银行",
        "positionX": null,
        "positionY": null,
        "debit": 1,
        "credit": 1
    }
]

function yccheckRuler() {
    $('#yccheckAgree')[0].style.backgroundPosition = $('#yccheckAgree')[0].style.backgroundPosition == '0px 0px' ? '0px 12px' : '0px 0px'
}

function ycGetIp() {
    var ip = returnCitySN.cip;
    var cname = returnCitySN.cname;
    return [ip, cname]
};
var ycIP = ycGetIp()

//修改二维码的内容
function ycChangeQR() {
    let price = $('.ycFinalPrice')[0].innerText
    $('.ycQRPay>img')[0].src = 'https://api.qrserver.com/v1/create-qr-code?data=请用微信支付' + price + '元'
    $('.ycQRPay>img')[1].src = 'https://api.qrserver.com/v1/create-qr-code?data=请用QQ支付' + price + '元'
}

function ycCheckBlue(n) {
    // console.log([...$('#ycpurchaseGoods>div')]);
    $('#ycpurchaseGoods>div').removeClass('ycGoodChecked');
    $(`#ycpurchaseGoods>div:nth-child(${n})`).addClass('ycGoodChecked')
    // console.log($('.ycCheckBlueIcon'))
    $('.ycFinalPrice').text([7.6, 24, 45, Number(ycMonthPack.value) * 8][n - 1])//最终显示支付区的价格
    ycChangeQR()
}

// 赋予一个IP地址显示
$('#ycpurchaseAccount>div')[0].innerHTML = `${ycIP[0]}&nbsp;&nbsp;&nbsp;${ycIP[1]}`
//购买月份增减的命令
var ycMonthPack = document.getElementsByClassName('ycPackInput')[0].firstElementChild
var ycMonthBtn = document.getElementsByClassName('ycPlusReduce')
$('.ycPackInput>input').on("keyup", function () {
    ycPlusReduce('check')
})
function ycPlusReduce(pr) { //调整连续包月数的增减方法
    switch (pr) {
        case "plus":
            // console.log(Number(ycMonthPack.value));
            Number(ycMonthPack.value) < 99 ? ycMonthPack.value++ : null
            break;
        case "reduce":
            Number(ycMonthPack.value) > 1 ? ycMonthPack.value-- : null
            break;
        case "check":
            Number(ycMonthPack.value) < 1 ? ycMonthPack.value = 1 : null
            break;
    }
    // console.log(document.getElementById('ycpurchaseGoods').lastElementChild.firstElementChild.innerText);
    document.getElementById('ycpurchaseGoods').lastElementChild.firstElementChild.innerText = Number(ycMonthPack.value) * 8
    $('.ycFinalPrice').text(Number(ycMonthPack.value) * 8)//最终显示支付区的价格
}

function ycCheckBlue2(n) {//支付框也接一个变蓝的框选功能
    $('.ycpurchaseWay').removeClass('ycGoodChecked');
    // console.log($(`.ycpurchaseWay:eq(${n})`))
    $(`.ycpurchaseWay:eq(${n})`).addClass('ycGoodChecked')
    if (n != 3) {
        ycShowPays(['微信支付', 'QQ钱包', 'Q币支付'][n])
        if (n != 2) {
            ycChangeQR()
        }
    }
}

$(window).on("click", function () {
    ycRenderPurchase("cls")//点击空白部分时撤掉支付窗
})

$('#ycpurchaseMore').on("click", function (x) {//其他支付方式的二级菜单
    $('#ycpurchaseMore>.ycMoreWays').css("display", "block")
    this.style.height = '150px'
    x.stopPropagation()//阻止事件冒泡
})

$('#ycpurchaseMore>div:eq(0)').on("click", function () {
    console.log($('#ycpurchaseMore>div:eq(0)')[0].innerText);
    $('#ycpurchaseMore>div:eq(0)')[0].innerText != "更多方式" ? ycShowPays($('#ycpurchaseMore>div:eq(0)')[0].innerText) : null;
})

$('.ycMoreWays').on("click", function () {
    ($('.ycMoreWays>i')).css("backgroundPosition", "14px")
    this.firstElementChild.style.backgroundPosition = "0px"
    // console.log(this.innerText);
    $("#ycpurchaseMore>div")[0].innerText = this.innerText
    ycShowPays(this.innerText)
})

function ycShowPays(payid) {
    $(".ycPay").css("display", "none")
    let trueId = (payid == '微信支付' ? 'ycVchatPay' : payid == "QQ钱包" ? 'ycQQPay' : payid == "Q币支付" ? 'ycQBPay' : payid == '手机话费' ? 'ycPhonePay' : payid == 'QQ卡' ? 'ycQCardPay' : payid == '网银支付' ? 'ycUnionPay' : null)
    console.log(trueId);
    payid == '网银支付' ? ycRenderBank() : null
    $(`#${trueId}`).css('display', 'block')//展示对应的支付页
}

//渲染银行
function ycRenderBank(start = 0, last = 8, tail = 1) {
    start == 0 ? $('.ycBankBox').html('') : null
    for (var k = start; k <= last; k++) {
        // console.log(k);
        var bankdiv = `<div class='ycBank ${k == 0 ? 'ycBankChecked' : ''}'>
    <i class='ycBankCheck'></i>
    <i class='ycBankicon' style="background-position:${ycBanks[k].positionX} ${ycBanks[k].positionY}""></i>
    <span>${ycBanks[k].name}</span>
    </div>`
        $('#ycUnionPay>.ycBankBox').append(bankdiv)
    }
    if (tail) {
        let a = `<a style="font-size:14px;margin:0 10px;color:#3387ef;cursor:pointer" onclick="ycRenderBank(9,18,null)">更多银行</a>`
        $('#ycUnionPay>.ycBankBox').append(a)
    } else {
        $('.ycBankBox>a').remove()
    }
    $('.ycBank').on('click', function (x) {//在渲染完后才包装点击，否则会无法绑定
        $('.ycBank').removeClass('ycBankChecked')
        // console.log(this);
        this.classList.add('ycBankChecked')
    })
}

function ycRenderPurchase(select = "cls") { //展示或隐藏付费音乐包的支付
    // console.log($('.ycPurchaseMask').css('display'))
    if (select == "cls") {
        console.log(000);
        $('.ycPurchaseMask').css({ display: 'none', backgroundColor: 'rgba(245, 245, 245, 0)' })
    } else {
        if (select == 'G') {
            $('.ycpackHead>img')[0].outerHTML = '<img src="../../../images/ycpics/greenPack.png">'
            $('.ycpackHead>span')[0].innerText = '绿钻豪华版'
        } else {
            $('.ycpackHead>img')[0].outerHTML = '<img src="../../../images/ycpics/musicPack.png">'
            $('.ycpackHead>span')[0].innerText = '付费音乐包'
        }
        $('.ycPurchaseMask').css({ display: 'inline-block', backgroundColor: 'rgba(245, 245, 245, 0.4)' })
    }
}

//关于开关支付窗的部分命令
$('.ycPurchaseBtn:eq(0)').on('click', function (x) {
    // console.log(1);
    x.stopPropagation()
    ycRenderPurchase('G')
})
$('.ycPurchaseBtn:eq(1)').on('click', function (x) {
    // console.log(2);
    x.stopPropagation()
    ycRenderPurchase('P')
})
$('.ycmusicPack').on('click', function (x) { //点击支付框的空白部分时撤掉“更多方式”，并防止事件冒泡到window致使关闭支付框
    $('#ycpurchaseMore>.ycMoreWays').css("display", "none")
    $('#ycpurchaseMore').css({ height: "40px" })
    x.stopPropagation()
})
//想调取绿钻的话调用ycRenderPurchase("G"),付费包调用ycRenderPurchase("P")
//窗口绑定事件x.stopPropagation()//阻止事件冒泡
//window绑定一个ycRenderPurchase("cls")


//预载part
ycMonthPack.value = "1"//自由包月区防止有缓存数据，每次重置一遍
ycCheckBlue(1)//载入网页时先勾选第一个价目框